<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Vue 生命周期函数 - 创建期间示例</title>
  
  <script src="../../../js/vue.js"></script>
</head>
<body>

  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">修改信息</button>
  </div>

  <script>
    // 创建一个 Vue 实例
    new Vue({
      el: '#app',
      data() {
        return {
          message: "同学们好，我是 Vue！"
        };
      },
      beforeCreate() {
        console.log("beforeCreate => data/methods 均未初始化，尝试读取 message:", this.message);
      },
      created() {
        console.log("created => data/methods 均已初始化，可以读取 message:", this.message);
      },
      beforeMount() {
        console.log("beforeMount => 模板已编译，但还没替换到 DOM 中");
      },
      mounted() {
        console.log("mounted => 页面真实 DOM 已经更新，学会 Vue 的生命周期很重要哦！");
      },
      methods: {
        changeMessage() {
          this.message = "信息已修改！";
          console.log("changeMessage => 修改了数据，后面还会触发更新期间的生命周期钩子（beforeUpdate/updated）");
        }
      }
    });
  </script>
</body>
</html>